<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哈移动大厅 - 主页</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 自定义 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        accent: '#00B42A',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .glass-effect {
                @apply bg-white/80 backdrop-blur-md;
            }
        }
    </style>
    
    <!-- 页面加载脚本 -->
    <script>
        window.onload = () => {
            <c:if test="${registerSuccess}">
                Swal.fire({
                    icon: 'success',
                    title: '注册成功！',
                    text: '欢迎加入哈移动大厅',
                    confirmButtonColor: '#165DFF'
                });
            </c:if>
            
            // 隐藏加载动画
            setTimeout(() => {
                document.getElementById('loading-overlay').classList.add('opacity-0');
                setTimeout(() => {
                    document.getElementById('loading-overlay').style.display = 'none';
                }, 300);
            }, 500);
        };
    </script>
    
    <!-- 引入 SweetAlert2 用于美化弹窗 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.27/dist/sweetalert2.all.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.27/dist/sweetalert2.min.css" rel="stylesheet">
</head>
<body class="font-inter min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4 overflow-hidden">
    <!-- 加载动画 -->
    <div id="loading-overlay" class="fixed inset-0 bg-white z-50 flex items-center justify-center transition-opacity duration-500">
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 border-4 border-primary/30 border-t-primary rounded-full animate-spin mb-4"></div>
            <p class="text-primary font-medium">正在加载...</p>
        </div>
    </div>
    
    <!-- 背景装饰元素 -->
    <div class="fixed inset-0 overflow-hidden -z-10">
        <div class="absolute top-0 left-0 w-full h-full bg-[url('<%=request.getContextPath()%>/static/image/丛雨.jpg')] bg-cover bg-center opacity-50"></div>
        <div class="absolute -top-20 -right-20 w-80 h-80 bg-primary/20 rounded-full filter blur-3xl"></div>
        <div class="absolute -bottom-32 -left-20 w-96 h-96 bg-secondary/20 rounded-full filter blur-3xl"></div>
    </div>
    
    <!-- 主容器 -->
    <div class="w-full max-w-md glass-effect rounded-2xl shadow-xl p-8 border border-white/30 relative overflow-hidden transform transition-all duration-500 hover:shadow-2xl">
        <!-- 装饰性背景元素 -->
        <div class="absolute top-0 right-0 w-40 h-40 bg-primary/10 rounded-full -mr-20 -mt-20"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-accent/10 rounded-full -ml-16 -mb-16"></div>
        
        <!-- 页面标题 -->
        <div class="text-center mb-10 relative">
            <h1 class="text-[clamp(2rem,5vw,2.5rem)] font-bold text-dark mb-2 text-shadow">
                哈移动大厅
            </h1>
            <p class="text-gray-600 font-medium">提供优质的移动服务体验</p>
            
            <!-- 装饰线 -->
            <div class="w-20 h-1 bg-primary/80 mx-auto mt-4 rounded-full"></div>
        </div>
        
        <!-- 按钮区域 -->
        <div class="space-y-4 relative">
            <!-- 注册按钮 -->
            <a href="${pageContext.request.contextPath}/toRegister" class="flex items-center justify-center gap-3 py-4 px-6 bg-gradient-to-r from-primary to-primary/90 text-white rounded-xl font-semibold btn-hover shadow-md">
                <i class="fa fa-user-plus text-xl"></i>
                <span class="text-lg">新用户注册</span>
            </a>
            
            <!-- 登录按钮 -->
            <a href="${pageContext.request.contextPath}/toLogin" class="flex items-center justify-center gap-3 py-4 px-6 bg-gradient-to-r from-dark to-dark/90 text-white rounded-xl font-semibold btn-hover shadow-md">
                <i class="fa fa-sign-in text-xl"></i>
                <span class="text-lg">已有账号登录</span>
            </a>
        </div>
        
        <!-- 底部信息 -->
        <div class="mt-10 text-center text-sm text-gray-500">
            <p>© 2025 哈移动大厅 版权所有</p>
            <p class="mt-1">客服热线: 088-088-54008</p>
        </div>
    </div>
</body>
</html>